const boxes=document.querySelectorAll('.box')
window.addEventListener('scroll',checkBoxes)
checkBoxes()
// 进入页面就执行一次

function checkBoxes(){
    // 设置的是 显示内容的最小高度
    const triggrtBottom=window.innerHeight / 5 * 4

    boxes.forEach(box=>{
        // 方块距离顶部的距离
        const boxTop=box.getBoundingClientRect().top

        if(boxTop<triggrtBottom){
            box.classList.add('show')
        }else{
            box.classList.remove('show')
        }
    })
}